<template>
  <div class="sign-in-subscribe-shift-card">
    <c-title text="转证"></c-title>
    <div class="box">
      <div class="box-item">
        <div class="z-index_1" v-if="balance">
          <p>{{balance.name}}</p>
          <p class="count">{{balance.value}}</p>
        </div>
        <div class="balance">
          <img src="../../assets/images/sign_in_subscribe/balance.png" alt />
        </div>
      </div>
      <div class="box-item" >
        <div class="z-index_1" v-if="integral">
          <p>{{integral.name}}</p>
          <p class="count">{{integral.value}}</p>
        </div>
        <div class="balance">
          <img src="../../assets/images/sign_in_subscribe/integral.png" alt />
        </div>
      </div>
      <div class="box-item">
        <div class="z-index_1" v-if="point">
          <p>{{point.name}}</p>
          <p class="count">{{point.value}}</p>
        </div>
        <div class="balance">
          <img src="../../assets/images/sign_in_subscribe/point_int.png" alt />
        </div>
      </div>
    </div>
    <div class="main">
      <div class="flex">
        <span>类型&nbsp;&nbsp;&nbsp;</span>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">{{balance.name || '余额'}}</van-radio>
          <van-radio name="2">{{point.name || '积分'}}</van-radio>
          <van-radio name="3">{{integral.name  || '消费积分'}}</van-radio>
        </van-radio-group>
      </div>
      <div class="flex between mt-30">
        <span>转出账号</span>
        <input type="number" v-model="account" placeholder="请输入转出会员id" />
        <van-image
          width="1rem"
          height="1rem"
          @click="link"
          :src="require('../../assets/images/sign_in_subscribe/qr_code_current.png')"
        />
      </div>
      <div class="flex mt-30">
        <span>转出数量</span>
        <input type="number" v-model="number" class="ml-45" placeholder="请输入转出数量" />
      </div>
      <div class="flex between mt-30">
        <span>支付密码</span>
        <input :type="password_flag" v-model="password" placeholder="请输入支付密码" />
        <div @click="password_switch">
          <img
            v-if="password_flag == 'text'"
            src="../../assets/images/view_password.png"
            style="width: 1.25rem;"
          />
          <img v-else src="../../assets/images/no_view_password.png" style="width: 1.25rem;" />
        </div>
      </div>
    </div>
    <van-button class="btn" color="#F25C5C" @click="confirm">确认转证</van-button>

    <van-overlay :show="password_show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block" >
            <div class="flex">
              <span class="flex-1">提示</span>
              <van-icon name="cross" @click="show=false" />
            </div>
            <div class="error-password">支付密码输入错误</div>
            <div class="group-btn">
            <van-button size="small" style="border-radius: 0.3rem;" @click="password_handle('forget')">忘记密码</van-button>
            <van-button size="small" style="border-radius: 0.3rem;" type="danger" @click="password_handle('input')">重新输入</van-button>
            </div>
          </div>
        </div>
      </van-overlay>

  </div>
</template>

<script>
import { Image as VanImage } from "vant";
export default {
  components: { VanImage },
  data() {
    return {
      password_show:false,
     is_has_password: false,
      account: "",
      password: "",
      radio: "1",
      number: "",
      password_flag: "password",
      balance: {},
      integral: {},
      point: {}
    };
  },

  activated() {
    this.password = '';
    this.account = '';
    this.number='';
    this.password_show = false;
    this.is_has_password=false;
    this.getData();
    this.getBalancePwdInfo();
  },
  methods: {
    getBalancePwdInfo() {
      $http.get("member.balance-password.is-has-password", {}, "").then(
        (response)=> {
          if (response.result == 1) {
            this.is_has_password = response.data.is_has
          } else {
            this.$dialog.alert({message:response.msg});
          }
        },
        function(response) {
            console.log(response);
        }
      );
    },
    password_handle(type){
      if(type == 'forget'){
        let _url = document.location.href;
        if(this.is_has_password){
          _url =  _url.replace(/sign_in_subscribe_shift_card/,'member/balance_password');
          window.location.href = _url
        }else{
          _url =  _url.replace(/sign_in_subscribe_shift_card/,'member/set_balance_password');
          window.location.href = _url
        }
      }else {
        this.password_show = false;
      }
    },
    async confirm() {

      if(this.radio == "1"){
        if(this.number>this.balance.value){
          return this.$toast(`转让${this.balance.name}不能大于您的${this.balance.name}`);
        }
      }else if(this.radio=="2"){
        if(this.number>this.point.value){
          return this.$toast(`转让${this.point.name}不能大于您的${this.point.name}`);
        }
      }else if(this.radio == "3"){
        if(this.number>this.integral.value){
          return this.$toast(`转让${this.integral.name}不能大于您的${this.integral.name}`);
        }
      }


      let { result, msg } = await $http.post("plugin.sign-buy.frontend.password-verify.index", { pwd: this.password });
      if (result == 0) {
        this.password_show = true;
        return
      };
      let url = "";
      let json = {};
      if (this.radio == "1") {
        url = "finance.balance.transfer";
        json.transfer_money = this.number;
        json.recipient = this.account;
      } else if (this.radio == "2") {
        url = "finance.point-transfer.index";
        json.transfer_point = this.number;
        json.recipient = this.account;
      } else {
        url = "plugin.integral.Frontend.Modules.Integral.Controllers.Transfer";
        json.change_value = this.number;
        json.recipient_id = this.account;
      }
      $http.get(url, json).then(
        response => {
          if (response.result == 0) {
            this.$toast(response.msg);
            return false;
          }
          this.getData();
          this.$toast(response.msg);
        },
        function(response) {
          // error callback
        }
      );
    },
    async getData() {
      let { data, result, msg } = await $http.get("plugin.sign-buy.frontend.asset-transfer.index");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.balance = data.balance;
      this.integral = data.integral;
      this.point = data.point;

    },
    link() {
      this.$router.push(this.fun.getUrl("sign_in_subscribe_code"));
    },
    password_switch() {
      if (this.password_flag == "password") {
        this.password_flag = "text";
      } else {
        this.password_flag = "password";
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-icon-success::before {
  position: absolute;
  content: "" !important;
  background: #fff;
  width: 10px;
  left: 50%;
  top: 50%;
  height: 10px;
  border-radius: 100px;
  transform: translate(-50%, -50%);
}

.sign-in-subscribe-shift-card {
  .flex-1 {
    flex: 1;
  }

  .error-password {
    margin: 2rem 0;
  }

  .group-btn {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 17.75rem;
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;
  }

  .z-index_1 {
    z-index: 1;
  }

  .balance {
    position: absolute;
    right: 0;

    img {
      width: 6.875rem;
    }
  }

  input {
    border: none;
  }

  padding: 0.5rem;

  .van-radio__icon--checked {
    position: relative;
  }

  .mt-30 {
    margin-top: 1.875rem;
  }

  .between {
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }

  .ml-45 {
    margin-left: 2.8125rem;
  }

  .btn {
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
  }

  .main {
    margin-top: 0.5625rem;
    border-radius: 0.3125rem;
    background: #fff;
    padding: 2rem 1rem 2.0625rem 1.5rem;
  }

  .box {
    display: flex;
    justify-content: space-between;
  }

  .count {
    margin-top: 0.4375rem;
    font-size: 1.0625rem;
    color: #f51d1d;
  }

  .box-item {
    display: flex;
    position: relative;
    width: 32%;
    height: 4.9375rem;
    padding-top: 0.4375rem;
    padding-left: 0.625rem;
    background: #fff;
    border-radius: 0.3125rem;
    text-align: left;
  }
}
</style>
